<template>
    <div class="navbar">
        <div class="box">
            <a v-for="(item, index) in navitem" :key="index"
               @click="changeRouter(item.path, index)"
               :class="{nav_active:item.path===isActive}"
            >
                <i :class="item.icon"></i>
                <span>{{item.tit}}</span>
            </a>
            <a class="jijian" href="/#/send">
                <img src="@/assets/mainpage/jijian.png">
            </a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "navbar",
        data() {
            return {
                navitem: [
                    {path: '/index', icon: 'el-icon-house', tit: '首页'},
                    {path: '/qujian', icon: 'el-icon-box', tit: '取件'},
                    {path: '/send', icon: 'el-icon-s-promotion', tit: '寄件'},
                    {path: '/shopCar', icon: 'el-icon-shopping-bag-1', tit: '裹裹购'},
                    {path: '/userMine', icon: 'el-icon-user', tit: '我的'}
                ]
            }
        },
        computed: {
            isActive: function () {
                return this.$route.path;
            }
        },
        methods: {
            changeRouter(path, index) {
                this.$router.push(path);
            }
        }
    }
</script>

<style lang="scss" scoped>
.navbar {
    position: fixed;
    bottom: 0;
    height: 110px;
    width: 100%;
    background-color: #fff;
    z-index: 100;
    .box {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-top: 1px solid rgba(0, 0, 0, .1);
        & > a {
            flex-wrap: wrap;
            i {
                display: flex;
                justify-content: center;
                padding: 5px 0;
                font-size: 40px;
            }
        }
    }
}
.nav_active {
    color: #2f8cff;
}
.jijian {
    position: absolute;
    bottom: 3px;
    img {
        height: 120px;
    }
}
</style>